<template>
  <div>
    <van-swipe :autoplay="3000" indicator-color="white" @change="onChange">
      <van-swipe-item v-for="(item, index) in homeSwiperImgs" :key="index">
        <a :href="item.link">
          <img class="" :src="item.image" @load.once="imgLoad">
        </a>
      </van-swipe-item>
      <div class="custom-indicator" slot="indicator">
        {{ current + 1 }} / 4
      </div>
    </van-swipe>
  </div>
</template>
<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
Vue.use(Swipe).use(SwipeItem);

export default {
  name: 'Swiper',
  data() {
    return {
      swiperImages: [],
      current: 0
    }
  },
  props: {
    homeSwiperImgs: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    imgLoad() {
      // let imgLoadLeat = setInterval( () =>{
        
      // },50)
      this.$emit('imgLoad',true)
    }
  }
}
</script>
<style>
  img{width: 100%;}
  .custom-indicator{position: absolute;right: 5px;bottom: 10px;background: rgba(0,0,0,0.3);padding: 2px 8px;color:#fff}
</style>